<!--
 * @Description:订单页物流
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-11 10:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 17:30:02
-->
<template>
	<view class="order-logistics-container">
		<c-navigation-bar :title="$t('orderDetails.logistics')"></c-navigation-bar>
		<view class="container-box">
			<!-- 订单的商品列表 -->
			<!-- 	<view class="order-box">
				<view class="order-item" v-for="item in orderList">
					<orderCard :orderDetails="item"></orderCard>
				</view>
			</view> -->
			<view class="" style="margin: 20rpx 0;">
				<image style="width:100%; height: 480rpx;;" src="@/static/images/orderLogistics.png" mode="aspectFill"></image>
			</view>
			<view class="steps-box">
				<view :class="`steps-item ${item.date ? 'is-passing' : ''}`" v-for="(item,index) in stepList" :key="index">
					<view class="steps-icon"></view>
					<!-- 文字 -->
					<view class="steps-text">
						<!-- 名称描述 -->
						<view>
							<view class="steps-name">
								{{ item.val }}
							</view>
							<view class="steps-des" style="display: flex;">
								{{ item.des }}

								<imageForSize v-if="index==2 && vuex_shoping_cart_log.express"
									@click="copyCode(vuex_shoping_cart_log.express)" size="36" style="margin-left: 20rpx;"
									:src="require('@/static/svg/copy-template.svg')" mode="">
								</imageForSize>
							</view>
						</view>
						<!-- 日期时间 -->
						<view v-if='item.date'>
							{{publicJS.timeZoneSwitching(item.date)}}
						</view>
					</view>
				</view>
			</view>
			<!-- 确认收货按钮 -->
			<button type="default" @click="openModal" style="bottom:10px;">
				<u-loading mode="flower" style="margin-right: 10rpx;" :show="isloading"></u-loading>
				{{$t('orderDetails.confirmReceipt')}}
			</button>
			<!-- 密码 -->
			<inputPayPassword @finish="payPwdPopFinish" :payPwdPopShow.sync="payPwdPopShow" :maxlength="6"
				@close="handleClose"></inputPayPassword>
			<view>
				<u-toast ref="uToast" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading: false,
				payPwdPopShow: false,
				show: false,
				orderList: [
					{}
				],
				stepList: [{
						val: this.$t('orderDetails.OrderPlaced'),
						des: this.$t('orderDetails.OrderPlacedTips'),
						time: '10:30 AM',
						date: 'October 02, 2021'
					},
					{
						val: this.$t('orderDetails.Confirmed'),
						des: this.$t('orderDetails.ConfirmedTips'),
						time: '10:55 AM',
						date: 'October 02, 2021'
					},
					{
						val: this.$t('orderDetails.OrderShipped'),
						des: '',
						time: '02:37 PM',
						date: 'October 04, 2021'
					},

					{
						val: this.$t('orderDetails.Delivered'),
						des: this.$t('orderDetails.DeliveredTips'),
						time: '',
						date: ''
					}
				]

			};
		},
		methods: {
			handleClose() {
				this.isloading = false;
			},
			backEvent() {
				uni.navigateTo({
					url: `/pages/order/myOrder`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			cardClick() {},
			//打开密码框
			openModal() {
				this.payPwdPopShow = true;
				this.isloading = true;
			},
			//输入密码后掉接口
			payPwdPopFinish(val) {
				console.log(val);
				let data = {
					orderSkuId: this.orderList[0].id,
					password: val
				};
				this.$u.post('/app/shopOrderInfo/operation', data).then((res) => {
					if (res.code == 200) {
						this.isloading = false;
					}
					this.payPwdPopShow = false;
					this.showToast(this.$t('orderDetails.confirmReceipt'), "default", '/pages/order/myOrder')
				});
			},
			showToast(tittle, type, url) {
				this.$refs.uToast.show({
					title: tittle,
					type: type,
					url: url
				})
			},
			copyCode(code) {
				uni.setClipboardData({
					data: code,
					success: () => {
						this.$u.toast(this.$t('Invitation.SuccessfulReplication'))
					},
					showToast: false
				});
			},
		},
		onLoad() {

			console.log(this.vuex_shoping_cartList)
			this.orderList[0] = this.vuex_shoping_cart_log;
			this.stepList[0].date = Number(this.vuex_shoping_cartList.orderInfo.createTime)
			this.stepList[1].date = Number(this.vuex_shoping_cartList.orderInfo.payTime)
			this.stepList[2].date = Number(this.vuex_shoping_cartList.orderInfo.consignTime)

			if (this.vuex_shoping_cart_log.express) {
				this.stepList[2].des = this.$t('orderDetails.OrderShippedTips') + this.vuex_shoping_cart_log.express
			} else {
				this.stepList[2].des = this.$t('orderDetails.awaitingCollection')
			}

			this.stepList[3].date = Number(this.vuex_shoping_cartList.orderInfo.endTime)

		}
	};
</script>

<style lang="scss" scoped>
	// /deep/.pay-pwd-pop {
	// 	height: 700rpx !important;
	// }
	/deep/.pay-pwd-pop .popup-main .amount {
		display: none;
	}

	.order-logistics-container {
		.container-box {
			height: 82vh;
			padding-left: 0;
			padding-right: 0;

			>view {
				padding: 0 30rpx;
			}

			.order-box {
				border-bottom: 8rpx solid #f7f8fa;

				.order-item {
					padding: 28rpx 0;
					position: relative;

					&:not(:last-child) {
						&::after {
							position: absolute;
							content: '';
							width: 100%;
							height: 2rpx;
							background-color: #e1e8e8;
							bottom: -2rpx;
						}
					}
				}
			}

			.steps-box {
				margin-top: 40rpx;

				.steps-item {
					display: flex;
					padding-bottom: 60rpx;
					position: relative;

					>.steps-text {
						margin-left: 30rpx;
						display: flex;
						flex: auto;
						justify-content: space-between;

						>view {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
						}

						&>view:nth-child(2) {
							text-align: right;
							color: #a8a8a8;
							font-size: 20rpx;
							min-width: 100px;
						}

						.steps-name {
							color: #1e2432;
							font-size: 30rpx;
							font-weight: 500;
						}

						.steps-des {
							color: #323755;
							font-size: 24rpx;
						}
					}

					&.is-passing:not(:last-child) ::after {
						position: absolute;
						content: '';
						height: calc(100% - 48rpx);
						width: 4rpx;
						background-color: #2934d0;
						left: 22rpx;
						top: 48rpx;
					}

					.steps-icon {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						border: 4rpx solid #2934d0;
					}

					&.is-passing .steps-icon {
						background: #2934d0;
					}
				}
			}
		}
	}

	button {
		width: 670rpx;
		height: 120rpx;
		font-size: 32rpx;
		position: fixed;
		bottom: 58rpx;
		right: 0;
		left: 0;
	}
</style>